<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Marcus || Item Detail Page</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript" >
$("document").ready ( function () {
	$("#nav ul.about li:even").addClass("about");
	$("#nav ul.business li:even").addClass("busi");
	
	$("#left li").hover( function () {
		$(this).addClass("hover");	
		$(this).animate({"height":"35px"}, 200);
	},
	function () {
		$(this).removeClass("hover");	
		$(this).animate({"height":"25px"}, 0);
	});
	});
								
	
/*	$("#nav ul a.last").hover( function () {
		$("ul.about").slideDown();
	},
	function () {
		$("ul.about").slideUp();
	}
	);
	
	$("#nav ul a.busis").hover( function () {
		$("ul.business").slideDown();
	},
	function () {
		$("ul.business").slideUp();
	}
	);
}); */
</script>
</head>

<body>

<!-- HEADER START -->
<div id="header">

<div id="logo">

</div>

<!-- Just to increase height automatically --><div id="height_increaser"></div>

<div id="nav">
<ul>
<li><a href="index.html" class="first">Home</a></li>
<li><a href="item_detail.html">Purchase Products</a></li>
<li><a href="clean.html">Selft Clean Technology</a></li>
<li><a href="business.html" class="busis">Business Oppurtunities</a></li>
<li><a href="about.html" class="last">About Us</a></li>
</ul>

<div id="drop">
<ul class="about">
<li><a href="#">For landscapers</a></li>
<li><a href="#">For landscapers</a></li>
<li><a href="#">For landscapers</a></li>
<li><a href="#">For landscapers</a></li>
<li><a href="#">For landscapers</a></li>
</ul>
<ul class="business">
<li><a href="#">For landscapers</a></li>
<li><a href="#">For landscapers</a></li>
<li><a href="#">For landscapers</a></li>
<li><a href="#">For landscapers</a></li>
<li><a href="#">For landscapers</a></li>
</ul>

</div>

</div>



<div id="nav2">

<div id="cart">
<img src="images/cart.png" />
Cart 0 item(s)
</div>

<div id="button">
<ul>
<li class="first"><img src="images/resi.png" /><a href="#">Residential</a></li>
<li><img src="images/comm.png" /><a href="#">Commercial</a></li>
<li><img src="images/indus.png" /><a href="#">Industrial</a></li>
<li class="last"><img src="images/park.png" /><a href="#">Parks & Muncipilities</a></li>
</ul>
</div>

<div id="search">
<form>
<input type="field" class="field_search" value="Search Here ...." />
<input type="button" class="button_search" />
</form>
</div>

</div>

</div>
<!-- HEADER END -->

<!-- CONTENT START -->
<div id="content">

<!-- LEFT START -->
<div id="left">
<h1>Self Cleaning Treatment</h1>
<ul>
<li><a href="#">Engine Oil Stains</a></li>
<li><a href="#">Cooking Oil Stains</a></li>
<li><a href="#">Leaf Stains</a></li>
<li><a href="#">Wine Stains</a></li>
<li><a href="#">Wax Stains</a></li>
</ul>
<h1>Preventing</h1>
<ul>
<li><a href="#">Algae</a></li>
<li><a href="#">Molds</a></li>
</ul>
<h1>Surfaces To Protect</h1>
<ul>
<li><a href="#">Driveways</a></li>
<li><a href="#">Patios</a></li>
<li><a href="#">Retaining Walls</a></li>
<li><a href="#">Outdoor Kitchens</a></li>
<li><a href="#">Roofs</a></li>
<li><a href="#">Stucco Walls</a></li>
</ul>

<div id="featured"><!-- FEATURED START -->
<h1>Featured Products</h1>
<img src="images/feature-item.png" /><br />
<a href="#" class="name">Name of the product</a><br />
<a href="#" class="price">$56.45</a>
</div><!-- FEATURED END -->

</div>
<!-- LEFT END -->

<!-- RIGHT START -->
<div id="right">

<div id="item_detail">

<div id="images">
<div id="big">
<img src="images/item.png" class="product"/>
</div>
<a href="#"><img src="images/item.png"/></a>
<a href="#"><img src="images/item.png"/></a>
<a href="#"><img src="images/item.png"/></a>
<!-- Just to increase height automatically --><div id="height_increaser"></div>
</div>

<h5>A Good Product$758.94</h5>
<a href="#"><img src="images/add_fav.png" /></a>
<p>Here will be the description about the item which is listed at the left side. Here will be the description about the item which is listed at the left side. Here will be the description about the item which is listed at the left side. </p>
<h5>Keywords</h5>
<p><a href="#">One</a> <a href="#">Two</a> <a href="#">Three</a></p>
<h5>The seller accepts the Paypal</h5>
<img src="images/paypal.png" class="paypal" />

<div id="shipping">
<h5>Shipping</h5>
<p>Item ships from: United Kingdom.</p>
<table width="350" cellpadding="0" cellspacing="0">
<tr>
<td width="113"><h6>Ship To</h6></td>
<td width="85"><h6>Cost</h6></td>
<td width="150"><h6>With Another Item</h6></td>
</tr>
<tr>
<td><p>United States</p></td>
<td><p>$3.00</p></td>
<td><p>$13.00</p></td>
</tr>
<tr>
<td><p>Canada</p></td>
<td><p>$7.00</p></td>
<td><p>$9.00</p></td>
</tr>
<tr>
<td><p>United Arab</p></td>
<td><p>$5.00</p></td>
<td><p>$11.00</p></td>
</tr>
</table>
</div>

<!-- Just to increase height automatically --><div id="height_increaser"></div>
</div>

</div>
<!-- RIGHT END -->

<!-- Just to increase height automatically --><div id="height_increaser"></div>
</div>
<!-- CONTENT END -->

<!-- FOOTER START -->
<div id="footer">
<ul>
<li><a href="#"><img src="images/facebook.png" border="0" /></a></li>
<li><a href="#"><img src="images/youtube.png" border="0" /></a></li>
<li><a href="#">Conditions of Use</a></li>
<li><a href="#">Privacy of Policy</a></li>
</ul>
</div>
<!-- FOOTER END -->

</body>
</html>
